<template>
    <div>
        <div class="wrap">
            <div class="container">
                <div class="step">
                    <router-link to="/holdall"
                        ><span class="active">工具箱</span></router-link
                    >
                    &nbsp;&nbsp;<span>/</span>&nbsp;<router-link to="/birth_input"><span>生成八字</span></router-link>
                </div>
				<div class="page-title"><i>生成八字</i></div>
				<div class="top-box box">
					<div class="title" style="margin-bottom: 20px;">
					    <span class="circle"></span>
						当前算命者信息
					</div>
					<el-row class="item">
						<el-col :span="24" :md="4" class="score-title">
							<span class="name-title">姓名：</span><span class="name">{{this.$route.query.firstName}}</span>
						</el-col>
						<el-col :span="24" :md="4" class="score-title">
							<span class="name-title">性别：</span><span class="name">{{sexArr[this.$route.query.sex]}}</span>
						</el-col>
						<el-col :span="24" :md="8" class="score-title">
							<span class="name-title">出生日期-公历：</span><span class="name">{{this.$route.query.birthday | formatDate}}</span>
						</el-col>
						<el-col :span="24" :md="4" class="score-title">
							<span class="name-title">年龄：</span><span class="name">{{info.age}}</span>
						</el-col>
						<el-col :span="24" :md="4" class="score-title">
							<span class="name-title">属相：</span><span class="name">{{info.shengXiao}}</span>
						</el-col>
					</el-row>
				</div>
			
                <div class="c-bottom-box box">
					<div class="title">
                        <span class="circle"></span>
                        基础分析：
                    </div>
                    <el-row class="item">
						<el-col :sapn="24" :md="8" class="score-title">
							<span class="name-title">出生日期-公历：</span><span class="name">{{info.yangli | formatDate}}</span>
						</el-col>
						<el-col :sapn="24" :md="8" class="score-title">
							<span class="name-title">八字：</span><span class="name" style="letter-spacing: 6.5px;margin-left: 5px;">{{info.bazi}}</span>
						</el-col>
						<el-col :sapn="24" :md="8" class="score-title">
							<span class="name-title">纳音：</span><span class="name"><span v-for="(item,index) in info.nayin" :key="index" style="margin: 0 5px;">{{item}}</span> </span>
						</el-col>
						<el-col :sapn="24" :md="8" class="score-title">
							<span class="name-title">出生日期-阴历：</span><span class="name">{{info.yinli | formatDate}}</span>
						</el-col>
						<el-col :sapn="24" :md="8" class="score-title">
							<span class="name-title">五行：</span><span class="name"><span v-for="(item,index) in info.baZiWuXing" :key="index" style="margin: 0 5px;">{{item}}</span> </span>
						</el-col>
						<el-col :sapn="24" class="score-title" style="margin-top: 15px;">
							<span class="name-title font-weight-bold">{{info.mark}}</span>
						</el-col>
						<el-col :sapn="24" class="score-title">
							<span style="font-size: 12px;line-height: 1.1;margin-top: 10px;" class="name-title">重要说明：本结果为系统自动分析，仅供参考，八字缺什么与补什么无关，具体应由专业老师分析！</span>
						</el-col>
                    </el-row>
                </div>
				
				<div class="c-bottom-box box">
				    <el-row>
						<el-col :span="24">
							<span class="name-item-title">八字五行个数：</span> 
							<span class="name-item">{{info.wxCount.jin}}个金</span>，
							<span class="name-item">{{info.wxCount.mu}}个木</span>，
							<span class="name-item">{{info.wxCount.shui}}个水</span>，
							<span class="name-item">{{info.wxCount.huo}}个火</span>，
							<span class="name-item">{{info.wxCount.tu}}个土</span>
						</el-col>
				    </el-row>
				</div>
				<div class="c-bottom-box box">
				    <el-row class="item" style="margin-top: 0;">
						<el-col :span="24">
							<span class="name-item-title">四季用神参考：</span>
							<span class="name-item">{{info.sjys}}</span>
						</el-col>
						<el-col :span="24" style="margin-top: 10px;">
							<span class="name-item-title">穷通宝鉴调候用神参考：</span><span class="name-item">{{info.qtbj}}</span>
						</el-col>
				    </el-row>
				</div>
				
				<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        生肖个性：
				    </div>
				    <el-row class="item">
						<div>根据分析，您的生肖为“{{info.shengXiao}}”</div>
						<div class="content" v-html="info.sxgx">
						</div>
				    </el-row>
				</div>
				
	<!-- 			<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        生肖远程：
				    </div>
				    <el-row class="item">
						<div class="content" v-html="info.sxyc">
						</div>
				    </el-row>
				</div> -->
				
				<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        日干心性：
				    </div>
				    <el-row class="item">
						<div class="content" v-html="info.rgzxx">
						</div>
				    </el-row>
				</div>
				
				<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        日干支层次：
				    </div>
				    <el-row class="item">
						<div class="content" v-html="info.rgzcc">
						</div>
				    </el-row>
				</div>
				
				<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        日干支分析：
				    </div>
				    <el-row class="item">
						<div class="content" v-html="info.rgzfx">
						</div>
				    </el-row>
				</div>
				
				<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        五行生克制化宜忌：
				    </div>
				    <el-row class="item">
						<div class="content" v-html="info.skzhyj">
						</div>
				    </el-row>
				</div>
				
				<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        五行之性：
				    </div>
				    <el-row class="item">
						<div class="content" v-html="info.whzx">
						</div>
				    </el-row>
				</div>
				
				<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        四柱五行生克中对应需补的脏腑和部位：
				    </div>
				    <el-row class="item">
						<div class="content" v-html="info.whzx">
						</div>
				    </el-row>
				</div>
				
				<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        宜从事行业与方位：
				    </div>
				    <el-row class="item">
						<div class="content" v-html="info.hyhw">
						</div>
				    </el-row>
				</div>
				
				<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        三命通会：
				    </div>
				    <el-row class="item">
						<div class="content" v-html="info.smth1">
						</div>
						<div class="content" v-html="info.smth2">
						</div>
					</el-row>
				</div>
				
				<div class="c-bottom-box box">
					<div class="title">
				        <span class="circle"></span>
				        月日时名理：
				    </div>
				    <el-row class="item">
						<div class="content" v-html="info.yrsml.yue">
						</div>
						<div class="content" v-html="info.yrsml.ri">
						</div>
						<div class="content" v-html="info.yrsml.shi">
						</div>
				    </el-row>
				</div>
            </div>
        </div>
    </div>
</template>

<script>
import banner from "@/assets/images/classicName/banner2.png"
import {formatDate} from "@/util/util.js"
export default {
	filters: {
		formatDate(time) {
			var date = new Date(time);
			return formatDate(date, 'yyyy年MM月dd日 hh:mm:ss');
		}
	},
    data() {
        return {
			sexArr:["女","男","未知"],
			info:{},
        }
    },
    created() {
		
        this.nameScore(); 
    },
    methods: {
        // 名字解析请求
        nameScore() {
			let data=this.$route.query
			let arr=data.firstName.split('')
			
			let formData={
				sex:data.sex,
				firstName:arr.splice(0,1)[0],
				lastName:arr.join(''),
				birthday:data.birthday
			}
            this.$ajax.post("/util/baziParse",formData).then(res => {
				let ret = res.data;
				console.log(ret)
                if (ret.code == 0) {
					this.info=res.data.data
                } else {
                    this.$message.error("数据获取失败!")
                }
            })
        }
    }
}
</script>
 
<style scoped>
	.name{
		color: #3d5dea;
	}
	.name-title{
		color: #838383;
		font-size: 16px;
	}
	.font-weight-bold{
		font-weight: 500;
		color: #2e2e2e;
		line-height: 1.5;
	}
	.name-item{
		margin: 0 5px;
		color: #2E2E2E;
		font-size: 15px;
		line-height: 1.5;
	}
	.name-item-title{
		color: #424242;
		font-size: 16px;
	}
	.page-title{
		width: 100%;
		height: 30px;
		color: #fdfdfd;
		font-size: 25px;
		text-align: center;
		line-height: 0px;
	}
	@media screen and (max-width:450px) {
		.name-info{
			border-right: 0!important;
			border-top: 1px solid #CCC!important;
		}
		.name-info:first-child{
			border-top: 0!important;
		}
		.score-title{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0px!important;
		}
		.box{
			padding: 20px!important;
		}
	}
    .wrap {
        position: relative;
        background: url(../../assets/images/classicName/banner2.png) top no-repeat;
        font-size: 15px;
        background-color: rgb(241, 242, 249);
        padding-bottom: 1px;
    }

    .step {
        padding: 25px 0;
    }

    .step .active {
        color: #fff;
    }

    .step span {
        color: #ccc;
    }

    .box {
        background: #fff;
        padding: 30px;
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .top-box .avatar-box {
        text-align: center;
        width: 90px;
        overflow: hidden;
        height: 90px;
    }

    .top-box .avatar-box img {
        width: 100%;
    }

    .top-box .item .left {
        color: rgb(131, 131, 131);
    }

    .top-box .item .right {
        color: rgb(61, 93, 234)!important;
    }

    .top-box .item-box .item {
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    .top-box .item-box .item:first-child {
        margin-top: 0px;
    }

    .top-box .item-box .item .persent {
        height: 6px;
        width: 100px;
        display: inline-block;
        vertical-align: center;
        border-radius: 3px;
        margin-left: 10px;
        background: linear-gradient(left, rgb(98, 146, 225), rgb(240, 240, 240));
    }

    .c-center-box .title,
    .top-box .title,
    .c-bottom-box .title {
        color: #000;
        font-size: 18px;
        display: flex;
        font-weight: 600;
        align-items: center;
		margin-left: -10px;
		margin-bottom: 20px;
    }

    .c-center-box .title .circle,
    .top-box .title .circle,
    .c-bottom-box .title .circle {
        display: inline-block;
        border-radius: 50%;
        border: 4px solid rgb(250, 97, 102);
        width: 18px;
        margin-right: 10px;
        height: 18px;
    }

    .c-center-box .item {
        margin-top: 20px;
        line-height: 1.5;
    }

    .c-center-box .item .left {
        color: rgb(131, 131, 131);
    }

    .c-center-box .item .right {
        color: rgb(46, 46, 46);
    }

    .name-box {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .name-box .name {
        width: 60px;
		flex: 0 0 60px;
        height: 60px;
        font-weight: bold;
        background: url(../../assets/images/nameAnalysis/tianzige.png) no-repeat;
        background-size: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        margin-right: 15px;
    }

    .name-box .scoped.name {
		margin-top: 15px;
		width: 80px;
		height: 80px;
        overflow: hidden;
		margin-left: 50px;
		background: url(../../assets/images/nameAnalysis/score.png) no-repeat;
		background-size: 100%;
		font-size: 23px;
		color: #fff;
		line-height: 23px;
		display: flex;
		align-items: flex-start;
		padding-top: 13px;
    }
	.flex-row{
		flex-direction: row!important;
	}
    .top-box .tips .text {
        color: #888;
        margin-top: 20px;
    }

    .top-box .tips .text1 {
        margin-top: 15px;
        line-height: 20px;
    }
	.top-box .name-info{
		border-right: 1px solid #CCC;
		padding: 10px 0;
	}
	.top-box .name-info:last-child{
		border-right: 0;
	}
    .top-box .name-info .left {
        text-align: center;
        color: #424242;
		font-weight: bold;
    }
	.font-weight-normal{
		font-weight: normal!important;
		color: #838383!important;
		text-align: right!important;
		padding-right: 15px!important;
	}
    .top-box .name-info .right {
		text-align: center;
        color: #333;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		
    }
	.top-box .name-info .right span{
		display: inline-flex;
		color: rgb(61, 93, 234);
	}
    .top-box .name-info .item {
        /* margin-top: 15px; */
		line-height: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	/* .c-center-box */
	 .item .tag {
		display: inline-block;
		background-color: rgb(250, 81, 86);
		color: #fff;
		padding: 4px 8px;
		line-height: 1;
		border-radius: 4px;
		margin-left: 10px;
	}
	.c-center-box .item{
		line-height: 1.8;
		color: #2e2e2e;
	}
	
	.c-bottom-box .item .text{
		margin-top: 30px;
		font-weight: bold;
		font-size: 16px;
		color: #424242;
	}
	
	.c-bottom-box .item .desc,
	.c-center-box .item .desc {
		font-size: 15px;
		color: #838383;
		line-height: 1.8;
		margin-top: 15px;
	}

	.c-center-box .item .text {
		font-size: 16px;
		color: #424242;
		font-weight: bold;
		margin-top: 10px;
	}

	.c-bottom-box .item .content,
	.c-center-box .item .content{
		color: #333;
		line-height: 2;
		margin-top: 10px;
	}

	.c-center-box .item {
		border-bottom: 1px solid rgb(220, 220, 220);
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.c-center-box .item:last-child {
		margin-bottom: 0;
		border: none;
		padding-bottom: 0;
	}

	.c-bottom-box .item {
		margin-top: 30px;
		
	}

	.item .score-title{
		line-height: 30px;
		padding-left: 15px;
		font-size: 15px;
		color: #2e2e2e;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item .score-title .score{
		color: #ff5b5b;
		font-size: 24px;
		font-weight: bold;
	}
	
	.item .score-title .a{
		cursor: pointer;
		color: #4158d7;
	}
	
	.box-title{
		font-size: 15px;
		color: rgb(250, 81, 86);
		line-height: 1.8;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		margin-bottom: 5px;
	}
	.x-title{
		flex: 0 1 12em;
		width: 14em;
		height: 100%;
	}
	.box-title .box-desc{
		flex: 1;
		font-size: 15px;
		color: #838383;
		font-weight: normal;
	}
	.m-0{
		margin-top: 0!important;
	}

</style>